# 协议详情页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

在卖家顾问需求小程序的业务流程中，当顾问为客户需求创建报价并上传协议后，客户需要能够查看协议详情，了解协议的具体内容、关联的需求和报价信息，并完成协议的确认签署操作。目前协议流程依赖人工写文档、发邮件签署，效率低下且体验不佳。客户无法便捷地查看协议信息、预览协议文档，也无法在线完成签署操作，导致协议签署流程繁琐、周期长，影响整体业务闭环的完成效率。

需求价值（补充对业务的价值）：

1. **提升协议签署效率**：客户可以随时查看协议详情，无需等待邮件或人工沟通，减少协议签署周期，加快业务闭环完成速度
2. **增强信息透明度**：客户可以清晰了解协议关联的需求、报价等完整信息，提升客户对服务的信任度和满意度
3. **优化客户体验**：提供协议文档在线预览功能，客户无需下载即可查看协议内容，降低操作门槛
4. **实现流程数字化**：将协议查看和签署流程线上化，减少人工操作成本，提高业务处理效率
5. **完善业务闭环**：作为需求-报价-协议流程的最后一环，确保客户能够便捷地完成协议确认，形成完整的业务闭环

需求目标（说明该需求要解决的问题或达成的目标）：

1. **解决协议信息查看不便的问题**：客户可以快速查看协议编号、关联需求、关联报价、协议时间等基本信息
2. **解决协议文档查看困难的问题**：提供协议文档的在线预览功能，支持客户无需下载即可查看协议内容
3. **解决协议摘要信息不清晰的问题**：清晰展示服务内容、服务价格、服务期限等关键信息，帮助客户快速了解协议要点
4. **解决协议签署操作繁琐的问题**：提供在线确认签署入口，支持跳转到第三方签署平台（如腾讯签）完成签署
5. **解决协议状态不透明的问题**：实时显示协议状态（待签署/已签署/已拒绝），让客户了解当前协议处理进度

用户故事（不同的视角下，希望的结果）：

**作为客户，我希望：**
- 能够查看协议的基本信息，包括协议编号、关联的需求和报价，以便了解协议的完整背景
- 能够在线预览协议文档，无需下载即可查看协议内容，以便快速了解协议条款
- 能够查看协议的摘要信息，包括服务内容、价格、期限等，以便快速把握协议要点
- 能够方便地复制协议编号，以便在其他场景中使用
- 能够查看协议文档并确认签署，以便完成业务闭环
- 如果对协议有异议，能够拒绝协议，以便重新协商
- 能够通过导航栏下载协议文档到本地，以便离线查看或存档

**作为顾问，我希望：**
- 客户能够自主查看协议详情，减少"协议包含什么内容"、"协议什么时候到期"这类基础咨询，让我有更多时间处理核心业务
- 客户能够通过协议摘要快速了解协议要点，减少因信息不对称导致的沟通成本
- 客户能够直接在页面上确认或拒绝协议，减少沟通环节，提升服务效率

**作为系统，需要：**
- 根据协议ID获取并展示协议相关信息
- 关联展示协议对应的需求和报价信息
- 提供协议文档的预览和下载功能
- 记录客户的协议操作（查看、拒绝、确认签署）
- 更新协议状态，并同步到相关业务流程

需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

### 1. 页面入口与导航

- 页面可通过需求详情页的"相关协议"入口进入，或从报价详情页的"查看协议"入口进入
- 导航栏左侧提供返回按钮，点击返回上一页
- 导航栏中间显示"协议详情"标题
- 导航栏右侧提供下载图标，点击可下载协议文档到本地

### 2. 协议基本信息展示

- **协议编号**：显示协议编号（格式如：`AG20240117001`），右侧提供复制图标，点击可复制协议编号到剪贴板，复制成功后显示"已复制"提示
- **关联需求**：显示关联的需求标题，文字颜色为主色调（`#6366f1`），点击可跳转到需求详情页
- **关联报价**：显示关联的报价单号和金额（格式如：`QT20240116001 (¥15,000)`），文字颜色为主色调（`#6366f1`），点击可跳转到报价详情页
- **协议时间**：显示协议的创建时间（格式：`YYYY-MM-DD HH:mm`）
- **协议状态**：显示当前协议状态，使用不同颜色标识：
  - **待签署**：蓝色背景（`#eef2ff`），蓝色文字（`#6366f1`）
  - **已签署**：绿色背景，绿色文字
  - **已拒绝**：灰色背景，灰色文字

### 3. 协议文档展示

- 显示协议文档标题"协议文档"
- 展示协议文件信息：
  - **文件图标**：PDF文件显示红色PDF图标（`fa-file-pdf`），图标背景为红色浅色背景（`bg-red-100`）
  - **文件名称**：显示协议文件名（如：`服务协议.pdf`）
  - **文件大小**：显示文件大小（如：`2.5 MB`）
- 提供"预览"按钮，点击可打开协议文档预览页面（支持PDF在线预览）
- 协议文档区域支持点击，点击后也可触发预览功能

### 4. 协议摘要展示

- 显示"协议摘要"标题
- 以列表形式展示以下信息，每项信息使用分隔线分隔：
  - **服务内容**：显示协议约定的服务内容描述
  - **服务价格**：显示协议总金额，使用主色调高亮显示（如：`¥15,000`），金额格式为千分位
  - **服务期限**：显示协议约定的服务完成期限（如：`2周`）

### 5. 底部操作区域

固定在页面底部，包含以下操作按钮：

- **查看协议**：主要操作按钮，全宽显示，点击后打开协议文档预览页面
- **拒绝协议**：次要操作按钮，与"确认签署"按钮并排显示（两列布局），点击后弹出确认对话框，确认后执行拒绝操作，协议状态更新为"已拒绝"
- **确认签署**：主要操作按钮，与"拒绝协议"按钮并排显示（两列布局），点击后：
  - 如果协议状态为"待签署"，弹出提示"即将跳转到腾讯签进行协议签署"
  - 跳转到第三方签署平台（腾讯签）完成签署流程
  - 签署完成后，协议状态更新为"已签署"

### 6. 数据获取规则

- 页面加载时，根据协议ID调用接口获取协议详情数据
- 接口返回数据包括：
  - 协议基本信息（编号、时间、状态）
  - 关联需求信息（需求ID、需求标题）
  - 关联报价信息（报价ID、报价单号、报价金额）
  - 协议文档信息（文件路径、文件名、文件大小、文件类型）
  - 协议摘要信息（服务内容、服务价格、服务期限）
- 数据加载时显示加载状态，加载失败显示错误提示

### 7. 状态流转规则

- **待签署状态**：显示"查看协议"、"拒绝协议"、"确认签署"三个按钮，所有按钮可操作
- **已签署状态**：隐藏"拒绝协议"和"确认签署"按钮，仅显示"查看协议"按钮
- **已拒绝状态**：隐藏"确认签署"按钮，显示"查看协议"按钮，"拒绝协议"按钮可显示但置灰或隐藏

### 8. 交互反馈规则

- 复制协议编号后，显示"已复制"提示（Toast提示）
- 点击关联需求或关联报价时，跳转到对应详情页
- 点击"预览"按钮或协议文档区域时，打开协议文档预览页面
- 点击导航栏下载图标时，下载协议文档到本地
- 点击"拒绝协议"按钮时，弹出确认对话框，确认后执行拒绝操作并显示操作结果提示
- 点击"确认签署"按钮时，显示跳转提示，然后跳转到第三方签署平台
- 所有操作完成后显示相应的成功或失败提示

### 9. 异常处理

- 如果协议已被删除或不存在，显示"协议不存在"提示并返回上一页
- 如果协议状态不允许当前操作（如已签署状态不允许再次签署），按钮置灰或隐藏
- 如果协议文档加载失败，显示"协议文档加载失败"提示，并提供重试功能
- 如果网络请求失败，显示网络错误提示，并提供重试功能
- 如果第三方签署平台跳转失败，显示错误提示并保持当前页面

### 10. 页面布局规则

- 页面最大宽度为414px（移动端适配），居中显示
- 页面背景色为浅灰色（`#f5f5f5`）
- 各个信息卡片使用白色背景，圆角边框，阴影效果
- 底部操作区域固定在页面底部，使用白色背景，顶部边框分隔
- 页面内容区域底部预留足够的padding，避免被底部操作区域遮挡

验收标准（列出明确、可验证的交付标准）：

### 功能验收标准

#### 协议信息展示
- 能够正确显示协议编号，且格式符合规范（`AG+日期+序号`）
- 能够正确显示关联需求标题，且可点击跳转到需求详情页
- 能够正确显示关联报价单号和金额，且可点击跳转到报价详情页
- 能够正确显示协议创建时间，格式为 `YYYY-MM-DD HH:mm`
- 能够根据协议状态显示对应的状态标签和颜色（待签署/已签署/已拒绝）
- 协议编号复制功能能够正常工作，复制后显示"已复制"提示

#### 协议文档功能
- 能够正确显示协议文档名称和大小
- 能够根据文件类型显示对应的文件图标（PDF显示PDF图标）
- 点击"预览"按钮能够打开协议文档预览页面
- 点击协议文档区域能够打开协议文档预览页面
- 协议文档预览功能支持PDF格式
- 导航栏下载图标能够下载协议文档到本地

#### 协议摘要展示
- 能够正确显示服务内容、服务价格、服务期限三项信息
- 服务价格使用主色调高亮显示，金额格式正确（¥符号+千分位）
- 各项信息之间使用分隔线分隔，视觉清晰

#### 操作功能
- 点击"查看协议"按钮能够打开协议文档预览
- 点击"拒绝协议"按钮能够弹出确认对话框，确认后协议状态更新为"已拒绝"
- 点击"确认签署"按钮能够显示跳转提示，并跳转到腾讯签签署页面
- 协议编号复制功能能够正常工作，复制后显示提示
- 导航栏返回按钮能够正确返回上一页
- 导航栏下载图标能够下载协议文档

#### 状态控制
- 待签署状态显示所有操作按钮（查看协议、拒绝协议、确认签署）
- 已签署状态隐藏"拒绝协议"和"确认签署"按钮，仅显示"查看协议"按钮
- 已拒绝状态隐藏"确认签署"按钮，显示"查看协议"按钮
- 按钮状态与协议状态保持一致，不允许的操作按钮应隐藏或置灰

### 交互验收标准

#### 页面交互
- 页面加载时显示加载状态
- 所有可点击元素有明显的视觉反馈（点击态）
- 操作完成后显示相应的成功或失败提示（Toast提示）
- 返回按钮能够正确返回上一页
- 跳转功能能够正确跳转到目标页面

#### 异常处理
- 数据加载失败时显示错误提示，并提供重试功能
- 协议文档加载失败时显示友好提示
- 网络错误时显示网络错误提示并提供重试
- 协议不存在时显示提示并返回上一页
- 第三方签署平台跳转失败时显示错误提示

### 数据验收标准

#### 数据准确性
- 协议信息与数据库数据一致
- 关联需求和报价信息正确关联
- 协议状态实时更新，与后端数据同步
- 协议时间格式正确，时区处理正确

#### 数据完整性
- 所有必填字段都有数据展示
- 可选字段为空时显示合理默认值或隐藏
- 协议文档信息完整，包括文件名、大小、类型

### 兼容性验收标准

#### 浏览器兼容
- 在小程序环境中正常运行
- PDF预览功能在小程序中可用
- 下载功能在小程序中可用（或提供替代方案）
- 第三方签署平台跳转功能正常

#### 设备兼容
- 页面在移动端（iOS、Android）正常显示
- 页面布局适配不同屏幕尺寸
- 底部操作区域在不同设备上正常显示，不被遮挡